import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { _HttpClient } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { ApiService } from '@core/services/api';
import { STData } from '@delon/abc';
import { ACLService } from '@delon/acl';

@Component({
  selector: 'app-check-record-list',
  templateUrl: './check-record-list.component.html',
  styleUrls:['./check-record-list.css']
})
export class CheckRecordListComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  watchImgFlag:boolean = this.aclService.canAbility("io-records-list/watchImg");//检查用户按钮权限
  selectData: any[];
  loading = false;
  visible:boolean = false
  callRecord:any={}
  config: SPage = {
    columns: [
      {
        index: 'callName',
        title: '送检人',
        width:100,
        filter: {
          placeholder: '请输入送检人姓名',
          type: 'string'
        }
      },
      {
        index: 'houseScanPicUrl',
        title: '抓拍图片',
        width:100,
        type: ColumnType.img,
        className:'personimage'
      },
      {
        index: 'callAddress',
        title: '主叫设备地址',
        width:200,
        className:'callAddress',
        filter: {
          placeholder: '请输入主叫设备地址',
          type: 'string'
        }
      },
      {
        index: 'houseScanTime',
        title: '发起呼叫时间',
        width:150,
      },
      {
        index: 'calledName',
        title: '监控中心人员',
        width:120,
        filter: {
          placeholder: '请输入监控中心人员姓名',
          type: 'string'
        }
      },
      // {
      //   index: 'centerScanTime',
      //   title: '监控中心扫描人脸',
      //   width:150,
      // },
      {
        index: 'callStatus',
        title: '呼叫状态',
        width:150,
      },
      {
        index: 'callStartTime',
        title: '接听呼叫时间',
        width:150,
      },
      {
        index: 'callEndTime',
        title: '呼叫结束时间',
        width:150,
      },
      {
        index: 'openStatus',
        title: '开门状态',
        width:100,
        type:ColumnType.tag,
        tag:{
          1:{text:'开门'},
          2:{text:'未开门'},
        },
      },
      {
        index: 'openDoorTime',
        title: '开门时间',
        width:150,
        type:ColumnType.date
      },
      {
        index: '',
        title: '操作',
        width:80,
        fixed:'right',
        buttons:[
          {
            text:'详情',
            click:(_record)=>{
                this.open(_record)
            }
          }
        ]
      },
    ],
    showCheckBox: false,
    reqUrl:'/core/submission/record/list'
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService,private img: ElementRef, private message: NzMessageService,private aclService: ACLService) { }
  
  imageInfo(imageUrl?: string): void {
    const modal = this.modal.create({
      nzTitle: '图片信息',
      nzContent: '<img width="100%" src="'+imageUrl+'">',
      nzWidth: 800,
      nzFooter: null
    })
  }
  handleClick(url):void{
    const modal = this.modal.create({
      nzTitle: '图片信息',
      nzContent: '<img width="100%" src="'+url+'">',
      nzWidth: 800,
      nzFooter: null
    })
  }
  open(res):void{
    this.callRecord = res
    this.visible = true
  }
  close():void{
    this.visible = false
  }
  dataProcess(data:STData[]){
    for(var item of data){
        if(item.deviceDescribe == "null"){
          item.deviceDescribe="";
        }
    }
    return data;
  }
  
  operate(e: any): void {
    if (e.title === '查看大图') {
      this.imageInfo(e.data.recordPersonUrl1);
    }
  }
  ngOnInit() {

  }
  ngAfterViewInit(){
    const self=this
    document.getElementsByTagName('table')[0].addEventListener('click',function(e){
     if(e.target && (<HTMLElement>e.target).nodeName.toLowerCase() == "img"){
       let src=(< HTMLMediaElement>e.target).currentSrc
       self.imageInfo(src)
     }
    })
  }

}
